<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>编辑学生信息</title>
    <link rel="stylesheet" href="../../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
    <style>
        .container {
            padding: 20px 40px;
            background-color: #f8f9fa;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            max-width: 800px;
            margin: 30px auto;
        }
        .form-row {
            display: flex;
            margin-bottom: 20px;
            align-items: center;
        }
        .form-row label {
            width: 120px;
            font-weight: bold;
            text-align: right;
            padding-right: 15px;
        }
        .form-input {
            flex: 1;
        }
        .form-row input, .form-row select {
            height: 40px;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            padding: 0 15px;
            transition: border .3s;
        }
        .form-row input:focus, .form-row select:focus {
            border-color: #409eff;
            outline: none;
        }
        .form-row .layui-textarea {
            min-height: 100px;
            padding: 10px 15px;
            line-height: 1.5;
        }
        h2.layui-text {
            text-align: center;
            margin-bottom: 30px;
            color: #1e9fff;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .submit-btn {
            display: block;
            width: 200px;
            margin: 30px auto 10px;
            height: 45px;
            font-size: 16px;
        }
        .header-info {
            background: linear-gradient(135deg, #1e9fff, #2d8cf0);
            color: white;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 30px;
            text-align: center;
        }
        .student-id {
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 1px;
        }
    </style>
</head>
<body>
<div class="container">
    <h2 class="layui-text">编辑学生信息</h2>

    <div class="header-info">
        <div>当前编辑学生ID：<span id="studentIdDisplay" class="student-id"></span></div>
    </div>

    <form class="layui-form" id="editForm">
        <input type="hidden" name="studentId" id="studentId">
        <input type="hidden" name="pwd" id="pwd">
        <input type="hidden" name="role" id="role">

        <div class="form-row">
            <label for="studentName">学生姓名:</label>
            <div class="form-input">
                <input type="text" name="studentName" placeholder="请输入学生姓名"
                       class="layui-input" id="studentName" lay-verify="required">
            </div>
        </div>

        <div class="form-row">
            <label for="sexSelect">性别:</label>
            <div class="form-input">
                <select name="sex" id="sexSelect" lay-verify="required">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
        </div>

        <div class="form-row">
            <label for="institute">学院:</label>
            <div class="form-input">
                <input type="text" name="institute" placeholder="请输入学院"
                       class="layui-input" id="institute" lay-verify="required">
            </div>
        </div>

        <div class="form-row">
            <label for="major">专业:</label>
            <div class="form-input">
                <input type="text" name="major" placeholder="请输入专业"
                       class="layui-input" id="major" lay-verify="required">
            </div>
        </div>

        <div class="form-row">
            <label for="grade">年级:</label>
            <div class="form-input">
                <input type="text" name="grade" placeholder="例如：2021级"
                       class="layui-input" id="grade" lay-verify="required">
            </div>
        </div>

        <div class="form-row">
            <label for="clazz">班级:</label>
            <div class="form-input">
                <input type="text" name="clazz" placeholder="例如：计算机1班"
                       class="layui-input" id="clazz" lay-verify="required">
            </div>
        </div>

        <div class="form-row">
            <label for="tel">电话号码:</label>
            <div class="form-input">
                <input type="text" name="tel" placeholder="请输入11位手机号码"
                       class="layui-input" id="tel" lay-verify="required|phone">
            </div>
        </div>

        <div class="form-row">
            <label for="email">电子邮件:</label>
            <div class="form-input">
                <input type="email" name="email" placeholder="请输入电子邮箱"
                       class="layui-input" id="email" lay-verify="email">
            </div>
        </div>

        <div class="form-row">
            <label for="cardId">身份证号:</label>
            <div class="form-input">
                <input type="text" name="cardId" placeholder="请输入18位身份证号"
                       class="layui-input" id="cardId" lay-verify="required|identity">
            </div>
        </div>

        <button class="layui-btn layui-btn-fluid submit-btn" lay-submit lay-filter="submitEdit">保存修改</button>
    </form>
</div>

<script src="../../../lib/layui-v2.6.3/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    layui.use(['form', 'layer'], function(){
        const form = layui.form;
        const layer = layui.layer;
        const $ = layui.$;

        // 读取localStorage中的学生数据
        const localDataStr = localStorage.getItem('currentStudent');
        if (!localDataStr) {
            layer.msg("未获取到学生信息！");
            return;
        }
        const student = JSON.parse(localDataStr);

        // 填充表单和隐藏字段
        $('#studentId').val(student.studentId || '');
        $('#studentIdDisplay').text(student.studentId || '');
        $('#studentName').val(student.studentName || '');
        $('#sexSelect').val(student.sex || '男');
        $('#institute').val(student.institute || '');
        $('#major').val(student.major || '');
        $('#grade').val(student.grade || '');
        $('#clazz').val(student.clazz || '');
        $('#tel').val(student.tel || '');
        $('#email').val(student.email || '');
        $('#cardId').val(student.cardId || '');
        $('#pwd').val(student.pwd || '');
        $('#role').val(student.role || '2');  // 保持学生角色默认2

        // 渲染表单
        form.render();

        // 提交编辑
        form.on('submit(submitEdit)', function(){
            const studentData = {
                studentId: parseInt($('#studentId').val()),
                studentName: $('#studentName').val(),
                sex: $('#sexSelect').val(),
                institute: $('#institute').val(),
                major: $('#major').val(),
                grade: $('#grade').val(),
                clazz: $('#clazz').val(),
                tel: $('#tel').val(),
                email: $('#email').val(),
                cardId: $('#cardId').val(),
                pwd: $('#pwd').val(),
                role: $('#role').val()
            };

            // 使用PUT请求更新学生信息
            axios.put('/student', studentData)
                .then(function(res) {
                    if(res.data && res.data.code === 200) {
                        layer.msg("学生信息更新成功！", {
                            icon: 1,
                            time: 1500
                        }, function() {
                            // 关闭当前弹层
                            const index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);

                            // 刷新父页面表格
                            parent.layui.table.reload('currentTableId');
                        });
                    } else {
                        layer.msg("更新失败：" + (res.data ? res.data.msg : '未知错误'));
                    }
                })
                .catch(function(error) {
                    layer.msg("请求失败：" + error.message);
                });

            return false;
        });
    });
</script>
</body>
</html>
